<template>
  <div class="conditions">
    <div class="condition-list">

      <!-- 暂定移除 标签树 功能，后期可能加上，不要删除 -->
      <!-- <v-condition-item
        :key="i"
        :condition="item"
        @onAddControl="handleAddControl($event, i)"
        @onDelControl="handleDelControl($event, i)"
        v-if="isChecked(item.id)"
        v-for="(item, i) in conditions"></v-condition-item> -->

      <v-condition-item
        :key="i"
        :condition="item"
        @onAddControl="handleAddControl($event, i)"
        @onDelControl="handleDelControl($event, i)"
        v-for="(item, i) in conditions"></v-condition-item>
    </div>

    <div class="examine">
      <range-date-picker ref="toolBar" class="timewidth210 height30"
        :defaultDate="dates"
        @date-change="getDate"></range-date-picker>
      <div class="btns rf">
        <el-button type="primary" size="mini" @click.native="search">查看</el-button>
        <el-button size="mini" @click.native="cancelEven">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import {RangeDatePicker} from '../../../../components'
import VConditionItem from './conditionItem'

export default {
  name: 'VConditions',

  components: {
    VConditionItem,
    RangeDatePicker
  },

  props: {
    conditions: {
      type: Array,
      required: true
    },

    dates: {
      type: Array,
      required: true
    }

    // 暂定移除 标签树 功能，后期可能加上，不要删除
    /* conditionsCheckedStatus: {
      type: Array,
      required: false
    } */
  },

  data () {
    return {}
  },

  methods: {
    search () {
      this.$emit('on-search')
    },

    cancelEven () {
      this.$emit('on-cancel-even')
    },

    // 暂定移除 标签树 功能，后期可能加上，不要删除
    /* isChecked (id) {
      if (this.conditionsCheckedStatus) {
        const item = this.conditionsCheckedStatus.find(item => {
          return item.id === id
        })
        return item ? item.checked : true
      } else {
        return true
      }
    }, */

    handleAddControl (controlIdx, conditionIdx) {
      const newControl = {
        value1: '',
        value2: '',
        value3: []
        // 暂定移除 且或 关系，后面可能加回来，先不要删除
        // relation: 'and'
      }
      const condition = this.conditions[conditionIdx]
      const controls = condition.controls || []
      let newControls = []
      let newCondition = {}
      let newConditions = []

      if (typeof controlIdx === 'number') {
        newControls = [...controls.slice(0, controlIdx + 1), newControl, ...controls.slice(controlIdx + 1)]
      } else {
        newControls = [...controls, newControl]
      }

      newCondition = {...condition, controls: newControls}
      newConditions = [...this.conditions.slice(0, conditionIdx), newCondition, ...this.conditions.slice(conditionIdx + 1)]
      this.$emit('change', newConditions)
    },

    handleDelControl (controlIdx, conditionIdx) {
      const condition = this.conditions[conditionIdx]
      const controls = condition.controls
      const newControls = [...controls.slice(0, controlIdx), ...controls.slice(controlIdx + 1)]
      const newCondition = {...condition, controls: newControls}
      const newConditions = [...this.conditions.slice(0, conditionIdx), newCondition, ...this.conditions.slice(conditionIdx + 1)]
      this.$emit('change', newConditions)
    },

    getDate (dates) {
      this.$emit('on-select-date', dates)
    }
  }
}
</script>

<style lang="stylus" scoped>
.conditions
  padding 10px 0

  .examine
    height 30px
    line-height 30px
    padding 0 20px
    margin-top 30px

    .btns
      width 150px

      .el-button
        display inline-block
        width 65px
        height 30px
</style>
